<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="用户名：" prop="username">
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { apiLogin } from "@/api";
export default {
  data() {
    return {
      // 搜集登录信息
      ruleForm: {},
      rules: {
        username: [
          // 非空校验
          { required: true, message: "请输入用户名", trigger: "blur" },
          // 长度校验
          {
            min: 3,
            max: 6,
            message: "用户名称不合法 请重新输入",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      // validate: 触发校验
      // this.$refs[formName]: form表单的实例
      this.$refs[formName].validate((valid) => {
        // valid: boolea值； true: 校验通过， false： 校验失败
        if (valid) {
          // 发送登录请求
          apiLogin(this.ruleForm).then((res) => {
            // 记录token
            localStorage.setItem("token", res.token);

            // 提示
            this.$message({
              message: "登录成功",
              type: "success",
            });

            // 跳转页面  重新加载页面 走app.vue 获取用户信息
            window.location.href = '/'
          });
        } else {
          // 不同过 返回false
          return false;
        }
      });
    },
  },
};
</script>